<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	#box1{
	
		width: 400px;
		border: 10px solid red;
		margin:  0 auto;
	
	
	} 
	/* 	#box1{
	
		width: 400px;
		border: 10px solid red;
		margin:  0 auto;
		height:500px;
	
	} */
	/* 	#box1{
	
		width: 400px;
		border: 10px solid red;
		margin:  0 auto;
		float: right;
	
	} */
		/* #box1{
		
			width: 400px;
			border: 10px solid red;
			margin:  0 auto;
			display: inline-block;
			
		} */
		/* body{
		
			text-align: center;
		} */

		/* .clear{
			clear: both;
		} */
		.clear:after{
			/* 追加一个空内容，然后变为块，清除浮动 */
			content: "";
			display: block;
			clear: both;
		}
span{
	width: 100px;
	height: 100px;
	border: 4px solid blue;
	text-align: center;
	line-height: 100px;
	float: left;
}
	</style>

</head>
<body>
	
	<div id="box1" class="clear">
		<span class="class1">1</span>
		<span class="class2">2</span>
		<span class="class3">3</span>
		<span class="class3">4</span>
		<span class="class3">5</span>
	<!-- 	<br clear="all" /> -->
		<!-- <div class="clear"></div> -->
	</div>
	<div>
		我是div   我是
		我是
		<br/>
		我是div
	</div>
</body>
</html>